<template>
  <view class="">
    <view class="top-panel">
      <image class="avatar" :src="avatarUrl" mode="scaleToFill"></image>
      <view v-if="hasLogin" @click="gotoEdit" class="user_info">
        <view class="tips">
          <view class="fc"
            >{{ userInfo.teamName ? userInfo.teamName + "·" : ""
            }}{{ userInfo.realName || userInfo.phoneNumber }}</view
          >
          <!-- <view class="ico">
            <u-icon name="edit-pen" size="36rpx"></u-icon>
          </view> -->
        </view>
        <view class="text">
          <view> 完善用户信息 </view>
          <view class="ico">
            <u-icon name="edit-pen" size="24rpx"></u-icon>
          </view>
        </view>
        <!-- <view class="edit" @click.stop="editAction()">
					<u-icon name="edit-pen" size="22rpx"></u-icon>
					<view style="margin-left: 6rpx;">修改</view>
				</view> -->
        <view
          class="apply"
          v-if="launchParms.includes(userInfo.adminType)"
          @click.stop="applyAction()"
        >
          <u-icon
            size="20"
            name="https://www.yinyaoit.com/YY/oa_apply_btn_ico.png"
          ></u-icon>
          <text style="margin-left: 8rpx"> 发起申请 </text>
        </view>
        <!--  -->
        <view
          class="apply"
          v-if="organizationParms.includes(userInfo.adminType)"
          @click.stop="gotoOrganization()"
        >
          <u-icon
            size="20"
            name="https://www.yinyaoit.com/YY/oa_organization_btn_ico.png"
          ></u-icon>
          <text style="margin-left: 8rpx"> 组织架构 </text>
        </view>
      </view>
      <view v-else class="tips" @click="toLogin">点击授权登录</view>
    </view>
    <view class="user-index">
      <!-- <iconCard
        :list="matchList"
        title="我的记录"
      ></iconCard> -->
      <iconCard
        :list="matchList"
        title="我的记录"
        v-if="
          userInfo.adminType == 'None' &&
          userInfo.baseUserInfoState != 'Disable'
        "
      ></iconCard>

      <!-- <moreCard
        :list="approveList"
        v-if="
          userInfo.adminType != 'None' &&
          userInfo.baseUserInfoState != 'Disable'
        "
      ></moreCard> -->
      <cardList
        v-if="
          withAuditParms.includes(userInfo.adminType) &&
          userInfo.baseUserInfoState != 'Disable'
        "
        :title="'待审批'"
        url="/pagesA/approval/list"
        iconName="https://www.yinyaoit.com/YY/with_audit_ico.png"
        :number="approveCount"
      ></cardList>
      <cardList
        v-if="
          withAuditParms.includes(userInfo.adminType) &&
          userInfo.baseUserInfoState != 'Disable'
        "
        :title="'项目推进'"
        url="/pagesA/approval/pushForwardList?type=1"
        iconName="https://www.yinyaoit.com/YY/project-forwarding-ico.png"
        :number="pushCount"
      ></cardList>
      <cardList
        v-if="
          exceedParms.includes(userInfo.adminType) &&
          userInfo.baseUserInfoState != 'Disable'
        "
        :title="'超期项目'"
        url="/pagesA/approval/exceedList?type=1"
        iconName="https://www.yinyaoit.com/YY/exceed-ico.png"
        :number="exceedCount"
      ></cardList>
      <cardList
        v-if="
          outApplyParms.includes(userInfo.adminType) &&
          userInfo.baseUserInfoState != 'Disable'
        "
        :title="'外出申请单'"
        url="/pagesA/outApply/approvalList?type=1"
        iconName="https://www.yinyaoit.com/YY/out_apply_ico.png"
        :showNumber="false"
      ></cardList>
      <cardList
        v-if="
          outApplyParms.includes(userInfo.adminType) &&
          userInfo.baseUserInfoState != 'Disable'
        "
        :title="'链接退款'"
        url="/pagesA/refund/list"
        iconName="https://www.yinyaoit.com/YY/refund_ico.png"
        :showNumber="false"
      ></cardList>
    </view>

    <!-- <view class="menu_list">
      <view class="menu_item">
        <u-cell-group :customStyle="cellGroupStyle">
          <u-cell
            v-for="(item, index) in toolList"
            :key="index"
            :url="item.url"
            isLink
            :title="item.label"
          >
            <u-icon
              color="#3c96f3"
              slot="icon"
              size="28"
              :name="item.uIcon"
            ></u-icon>
          </u-cell>
        </u-cell-group>
      </view>
    </view> -->
    <!-- 隐私协议 -->
    <!-- #ifdef MP-WEIXIN -->
    <!-- <privacy-popup ref="privacyComponent"></privacy-popup> -->
    <!-- #endif -->
    <!-- <bottomMenu :activityIndex="1"></bottomMenu> -->
  </view>
</template>

<script>
// import bottomMenu from '@/components/bottomMenu/index'
import iconCard from "./components/iconCard.vue";
import moreCard from "./components/moreCard.vue";
import cardList from "./components/cardList.vue";
import {
  getUserInfoApi,
  queryBeApproveCount,
  queryProcessCount,
  queryOverdueCount,
} from "@/api/user/index";
export default {
  components: {
    // bottomMenu
    iconCard,
    moreCard,
    cardList,
  },
  data() {
    return {
      cellGroupStyle: {
        "background-color": "#fff",
      },
      matchList: [
        {
          label: "历史场次",
          url: "/pagesA/classeseRecord/index",
          uIcon: "list-dot",
        },
        {
          label: "外出申请单",
          url: "/pagesA/outApply/index",
          uIcon: "file-text",
        },
      ],
      approveList: [],
      toolList: [
        {
          label: "审批列表",
          url: "/pagesA/approval/list",
          uIcon: "file-text",
        },
      ],
      withAuditParms: ["ChengZong", "TopAdmin", "SaleDirector", "Leader"],
      exceedParms: ["ChengZong", "TopAdmin"],
      launchParms: ["SaleDirector", "Leader"],
      organizationParms: ["TopAdmin", "ChengZong"],
      outApplyParms: ["SaleDirector"],
      approveCount: 0,
      pushCount: 0,
      exceedCount: 0,
    };
  },
  computed: {
    avatarUrl() {
      return (
        this.userInfo.avatar_url || require("@/static/images/icon-logo.jpg")
      );
    },
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length;
    },
  },
  methods: {
    /**
     * 发起按钮
     */
    applyAction() {
      console.log("发起按钮");
      uni.navigateTo({ url: "/pagesA/approval/apply" });
    },
    /**
     * 组织架构按钮
     */
    gotoOrganization() {
      console.log("发起按钮");
      uni.navigateTo({ url: "/pagesA/approval/organization" });
    },
    /**
     * 获取用户信息
     */
    userInfoFn() {
      let that = this;
      let userinfo = {};
      getUserInfoApi()
        .then((response) => {
          userinfo = response.data;
          userinfo.nickname = userinfo.realName;
          userinfo.mobile = userinfo.phoneNumber;
          userinfo.mobile_encrypt = `${userinfo.phoneNumber.substr(
            0,
            3
          )}****${userinfo.phoneNumber.substr(7)}`;
          console.log(userinfo, "userinfo");
          that.$store.dispatch("setUserInfo", userinfo);
          uni.setStorageSync("userInfo", JSON.stringify(userinfo));
        })
        .catch((e) => {
          this.$refs.toastRef.showToast({
            msg: e.data.detail,
            duration: 1000,
            position: "center",
          });
        });
    },
    /**
     * 获取待审批数量
     */
    getApproveList() {
      queryBeApproveCount().then((res) => {
        this.approveCount = res.data;
      });
    },
    /**
     * 获取项目推进数量
     */
    getPushList() {
      queryProcessCount().then((res) => {
        this.pushCount = res.data;
      });
    },
    /**
     * 获取超期数量
     */
    geteEceedCountist() {
      queryOverdueCount().then((res) => {
        this.exceedCount = res.data;
      });
    },

    /**
     * 编辑资料
     */
    gotoEdit() {
      uni.navigateTo({
        url: "/pages/user/edit",
      });
    },
    toLogin() {
      uni.navigateTo({
        url: "/pages/user/login",
      });
    },
    editAction() {
      uni.navigateTo({
        url: "/pages/user/edit",
      });
    },
  },
  onShow() {
    this.userInfoFn();
    this.getApproveList();
    this.getPushList();
    this.geteEceedCountist();
  },
};
</script>
<style>
page {
  background-color: #f5f7fb;
}
</style>

<style lang="scss" scoped>
.user-index {
  background-color: #f5f7fb;
  padding: 0 24rpx;
}
.top-panel {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  background-color: #fff;
  padding: 56rpx 24rpx 60rpx;
  box-sizing: border-box;
  background-image: url("https://www.yinyaoit.com/YY/user_logo_img.png");
  background-size: 228rpx 200rpx;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  .apply {
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    position: absolute;
    right: 24rpx;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    padding: 20rpx;
    border: 2rpx solid #a22c26;
    color: #a22c26;
    font-size: 26rpx;
  }
  .avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 16rpx;
    overflow: hidden;
  }

  .tips {
    font-weight: bold;
    font-size: 36rpx;
    margin-left: 28rpx;
    color: #333333;
    // height: 160rpx;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
    margin-bottom: 12rpx;

    .edit {
      width: 94rpx;
      font-size: 20rpx;
      background-color: red;
      background-color: rgba($color: #fff, $alpha: 0.8);
      border-radius: 50rpx;
      color: #6b6b6b;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1px 0;
    }
  }
  .ico {
    margin-left: 16rpx;
  }
  .text {
    font-size: 24rpx;
    margin-left: 28rpx;
    color: #cbccd0;
    display: flex;
    align-items: center;
  }
}

.menu_list {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20rpx;
  margin-top: -50rpx;

  .menu_item {
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
  }
}
</style>
